<script>
import axios from "axios";

export default {
name: "Organization",
  data() {
    return {
      value: '',
      departmentList: [],
      parentName:'',
      department:{
        id:'',
        departmentName:'',
        departmentHead:'',
        phone:'',
        email:'',
        parentId:'',
      },
    }
  },
  methods: {
    handleNodeClick(data) {
        this.value = data.value;
        this.getDepartment();
    },
    youMenu(){
      this.$message({
        message: '您点击了部门：'+this.value,
        type: 'success'
      });
    },
    getDepartment(){
      if (this.value===''){
       this.value = '1';
      }
      //根据id获取部门信息
      axios.get("/oa/system/getDepartmentById/"+this.value).then((res)=>{
          this.department = res.data.data;
      })
      //过几秒再发请求
      setTimeout(()=>{
          this.getParentName();
      },1200)
    },
    getParentName(){
      if (this.department.parentId!==null){
        //根据id获取上级部门名称
        axios.get("/oa/system/getDepartmentById/"+this.department.parentId).then((res)=>{
          this.parentName = res.data.data.departmentName;
        })
      }else {
        this.parentName = '无';
      }

    },
    getData() {
        axios.get("/oa/system/getAllDepartment").then((res)=>{
              this.departmentList = res.data.data;
        })
    },
    submitForm(){
    //   提示框
      this.$confirm('确定保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //保存修改部门信息
        axios.put("/oa/system/updateDepartment",this.department).then((res)=>{
          if (res.data.code===1){
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.getDepartment();
          }
        })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )
    },
    saveDepartment(){
      this.department.parentId = this.value;
      axios.post("/oa/system/insertDepartment",this.department).then((res)=>{
        if (res.data.code===1){
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
        }
        this.getDepartment();
        this.getData();
      })
    },
    del(){
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除部门
        axios.delete("/oa/system/deleteDepartment/"+this.value).then((res)=>{
          if (res.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

          }
        })
        this.value = '1';
        this.getDepartment();
        this.getData();
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      )
    }
  },
  created() {
  this.getData()
    this.getDepartment();
  },
}
</script>

<template>
  <div class="titleBox" >组织结构管理</div>
  <div>
    <el-tree
        style="max-width: 200px"
        :data="departmentList"
        default-expand-all
        @node-click="handleNodeClick"
        @node-contextmenu="youMenu"
    />
  </div>

  <div>
    <el-form v-model=this.department>
    <el-form-item label="部门名称">
      <el-input v-model="department.departmentName"></el-input>
    </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="department.departmentHead"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="department.phone"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="department.email"></el-input>
      </el-form-item>
      <el-form-item label="上级部门">
        <el-input v-model="parentName" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button type="primary" @click="saveDepartment()">新增</el-button>
        <el-button type="primary" @click="del()">删除</el-button>
        <el-button @click="getDepartment()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>


    <div>
      <!--  菜单-->
    </div>


</template>

<style scoped lang="less">

</style>
